.c-body{
  height: 100%;
  width: 100%;
  position: relative;
  color: #535353;
  overflow: hidden;
  font-size: 15px;
  text-rendering: optimizeLegibility;
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  background: #ebecee url(../images/body-bg.png) no-repeat 280px 150px fixed;
}

.c-container{
  display: flex;
  height: 100%;
  width: 100%;
}

.c-header{
  width: 100%;
  height: 75px;
  background: #2965d8;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  -webkit-transition: all .25s;
  transition: all .25s;
}

$mb:#253340;
.c-aside{
  height: 100%;
  .menu{
    width: 260px;
    height: 100%;
    background-color: $mb;

    .menu-item{
      padding: 20px 0 20px 30px;
      display: block;
      color: #fff;
      font-size: 15px;
      line-height: 25px;
      white-space: nowrap;
      overflow: hidden;
      i{
        color: #fff;
      }
      span{
        color: #fff;
      }
    }

    .sub-item{
      padding-left: 80px!important;
    }

    .el-menu-item{
      color: #fff;
      position: relative;

      & i{
        color: #fff;
      }

      &:hover{
        background: none;
        color: #4b8ad8;
        i{
          color: #4b8ad8;
        }
      }


      &.is-active{
        background: #1f2831;
        color: #2965d8;
        i{
          color: #2965d8;
        }
        &:before{
          content: '';
          position: absolute;
          width: 5px;
          background: #2965d8;
          height: 100%;
          right: -5px;
          top: 0;
        }
      }
    }

    .el-submenu__title{
      color: #fff;
    }

    .el-submenu .el-submenu__title{

      @extend .el-menu-item;
    }

    .el-menu-item-group{
      ul{
        background-color: #2e3c4b;
      }
      .el-menu-item-group__title{
        display: none;
      }
    }
  }

  .el-menu--collapse {
    width: 70px;
  }

}

.c-main{
  flex: 1;
  height: 100%;
  width: 100%;
  padding: 15px;
}
